<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>viewOrder</title>
    <link rel="StyleSheet" href="/css/mypetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="~{common/top}"></div>
<div id="Content">
    <div id="BackLink">
        <a href="/catalog/main">Return to Main Menu</a>
    </div>
    <div id="Catalog">
        <table   width="100%"   height="100%" border="0"   cellspacing="0"   cellpadding="0">
            <tr>
                <td   align="center"   valign="middle">
                    <table style="background-color:lightskyblue; margin:auto">
                        <tr>
                            <th align="center" colspan="2">
                                Order #<span th:text="${order.orderId}"></span>
                                <span th:text="${order.orderDate}"></span>
                            </th>
                        </tr>
                        <tr>
                            <th colspan="2">Payment Details</th>
                        </tr>
                        <tr>
                            <td>Card Type:</td>
                            <td th:text="${order.cardType}" ></td>
                        </tr>
                        <tr>
                            <td>Card Number:</td>
                            <td th:text="${order.creditCard}" ></td>
                        </tr>
                        <tr>
                            <td>Expiry Date (MM/YYYY):</td>
                            <td th:text="${order.expiryDate}" ></td>
                        </tr>
                        <tr>
                            <th colspan="2">Billing Address</th>
                        </tr>
                        <tr>
                            <td>First name:</td>
                            <td th:text="${order.billToFirstName}" ></td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td th:text="${order.billToLastName}" ></td>
                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td th:text="${order.billAddress1}" ></td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td th:text="${order.billAddress2}" ></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td th:text="${order.billCity}" ></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td th:text="${order.billState}" ></td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td th:text="${order.billZip}" ></td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td th:text="${order.billCountry}" ></td>
                        </tr>
                        <tr>
                            <th colspan="2">Shipping Address</th>
                        </tr>
                        <tr>
                            <td>First name:</td>
                            <td th:text="${order.shipToFirstName}" ></td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td th:text="${order.shipToLastName}" ></td>
                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td th:text="${order.shipAddress1}" ></td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td th:text="${order.shipAddress2}" ></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td th:text="${order.shipCity}" ></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td th:text="${order.shipState}" ></td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td th:text="${order.shipZip}" ></td>
                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td th:text="${order.shipCountry}" ></td>
                        </tr>
                        <tr>
                            <td>Courier:</td>
                            <td th:text="${order.courier}" ></td>
                        </tr>
                        <tr>
                            <td colspan="2">Status: <span th:text="${order.status}"></span></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <table>
                                    <tr>
                                        <th>Item ID</th>
                                        <th>Description</th>
                                        <th>Quantity</th>
                                        <th>Price</th>
                                        <th>Total Cost</th>
                                    </tr>
                                    <tr th:each="lineItem : ${order.lineItems}">
                                        <th:block th:if="${lineItem.quantity > 0}">
                                                <td>
                                                    <a th:href="@{'itemForm?itemId=' + ${lineItem.item.itemId}}" th:text="${lineItem.item.itemId}">Item ID</a>
                                                </td>
                                                <td th:if="${lineItem.item != null}">
                                                    <span th:text="${lineItem.item.attribute1}"></span>
                                                </td>
                                                <td th:if="${lineItem.item == null}">
                                                    <i>Description unavailable</i>
                                                </td>
                                                <td th:text="${lineItem.quantity}">Quantity</td>
                                                <td>
                                                    <span th:text="${#numbers.formatDecimal(lineItem.unitPrice, 1,'COMMA',2,'POINT')}">Unit Price</span>
                                                </td>
                                                <td>
                                                    <span th:text="${#numbers.formatDecimal(lineItem.total, 1,'COMMA',2,'POINT')}">Total</span>
                                                </td>
                                        </th:block>
                                    </tr>
                                    <tr>
                                        <th colspan="5">
                                            Total: <span th:text="${#numbers.formatDecimal(order.totalPrice, 1,'COMMA',2,'POINT')}" />
                                        </th>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>
<div th:replace="~{common/bottom}"></div>
</body>
</html>
